<template>
  <div v-show="is_show">
    <p class="up_img_tip" v-if="is_tip">
      建议上传尺寸: {{ real_width || width }} * {{ real_height || height }}
    </p>
    <div class="up_img_box" :style="{ width: width + 'px', height: height + 'px' }" v-if="!is_more">
      <img v-if="piclink && piclink != ''" :src="$fnc.getImgUrl(piclink)" alt="" />
      <i v-else class="el-icon-plus"></i>
      <p :style="{ width: width + 'px' }" @click="open_uppic">重新选择</p>
      <i class="pic_del el-icon-delete" @click="del_uppic"></i>
    </div>

    <div v-if="is_more && is_shop == false" style="display: flex;justify-content: flex-start;align-items: center;flex-wrap:wrap">
      <div class="up_img_box" :style="{ width: width + 'px', height: height + 'px' }" v-for="(item, i) in file" :key="i" style="margin:5px">
        <img v-if="item != ''" :src="$fnc.getImgUrl(item.piclink)" alt="" />
        <i class="pic_del el-icon-delete" @click="del_uppic(i)"></i>
      </div>

      <div class="up_img_box" style="margin:5px" :style="{ width: width + 'px', height: height + 'px' }" @click="open_uppic">
        <i class="el-icon-plus"></i>
        <p :style="{ width: width + 'px' }">重新选择</p>
      </div>
    </div>
    <div class="up_img_box" :style="{ width: width + 'px', height: height + 'px' }" @click="open_uppic" v-if="is_more && is_shop == true">
      <i class="el-icon-plus"></i>
      <p :style="{ width: width + 'px' }">重新选择</p>
    </div>
    <el-dialog title="我的图库" :close-on-click-modal="false" :modal="false" custom-class="pic_dia" :append-to-body="true" @close="close_dia"
        :visible.sync="up_show" top="10vh" width="95%">
      <div class="up_pic">
        <el-row class="row-bg">
          <el-col :span="4" class="pic_left">
            <div class="pic_left">
              <div class="pic_left_menu">
                <div class="pic_left_menu_item" @click="edit_cate(false)">
                  <i class="el-icon-circle-plus"></i>添加
                </div>
                <div class="pic_left_menu_item" @click="edit_cate(true)">
                  <i class="el-icon-edit-outline"></i>重命名
                </div>
                <div class="pic_left_menu_item" @click="del_cate()">
                  <i class="el-icon-delete-solid"></i>删除
                </div>
              </div>
              <el-menu :default-active="active_index" class="el-menu-vertical-demo" @select="click_menu">
                <el-menu-item index="0">
                  <i class="el-icon-folder"></i>
                  <span slot="title">全部图片({{ cate_list.sum_number }})</span>
                </el-menu-item>
                <el-menu-item :index="item.id" v-for="(item, k) in cate_list.data" :key="k">
                  <i class="el-icon-folder"></i>
                  <span slot="title">{{ item.title }}({{ item.number }})</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="20" class="pic_right">
            <el-col :span="24" class="pic_right_top">
              <el-col :lg="14" :md="24" class="pic_right_top_left">
                <el-button :loading="$store.state.isLoading" :disabled="
                    this.sel_pic != undefined && this.sel_pic.length > 0
                      ? false
                      : true
                  " type="success" style="margin-left: 10px" @click="use_sel()" size="small">使用照片</el-button>
                <el-upload class="upload-demo" :on-change="pic_change" action="/api/common/upload/gallery" :multiple="true"
                    :on-success="uploadSuccess" :data="{ cate_id: active_index }" :show-file-list="false" :auto-upload="true" list-type="none"
                    :disabled="active_index == 0 ? true : false" :file-list="fileList">
                  <el-button slot="trigger" size="small" style="margin-left: 10px" :disabled="active_index == 0 ? true : false" type="success">上传图片
                  </el-button>
                </el-upload>
                <el-button :loading="$store.state.isLoading" type="primary" style="margin-left: 10px" :disabled="
                    this.sel_pic != undefined && this.sel_pic.length > 0
                      ? false
                      : true
                  " @click="move_pic()" size="small">移动图片到</el-button>
                <el-button :loading="$store.state.isLoading" type="danger" style="margin-left: 10px" @click="del_pic()" :disabled="
                    this.sel_pic != undefined && this.sel_pic.length > 0
                      ? false
                      : true
                  " size="small">删除所选图片</el-button>
                <el-button :loading="$store.state.isLoading" v-if="this.pic_list != undefined && this.pic_list.length > 0" type="warning"
                    style="margin-left: 10px" @click="sel_all()" size="small">全选</el-button>
                <el-button :loading="$store.state.isLoading" v-if="this.sel_pic != undefined && this.sel_pic.length > 0" type="info"
                    style="margin-left: 10px" @click="cancel_sel()" size="small">取消选择</el-button>
              </el-col>
              <el-col :lg="10" :md="24" class="pic_right_top_right">
                <el-date-picker v-model="createTime" type="datetimerange" size="small" align="right" unlink-panels value-format="timestamp"
                    range-separator="-" clearable start-placeholder="上传时间起" end-placeholder="上传时间止" :picker-options="pickerOptions2">
                </el-date-picker>
                <el-input size="small" style="margin-left: 10px" placeholder="请输入标题" clearable v-model="search_form.title"></el-input>
                <el-button :loading="$store.state.isLoading" type="danger" style="margin:0 10px" @click="search_btn" size="small">搜索</el-button>
              </el-col>
            </el-col>
            <el-col :span="24" class="pic_right_bottom" v-infinite-scroll="load" :infinite-scroll-delay="300" :infinite-scroll-disabled="noMore">
              <el-row :gutter="20" type="flex" justify="start" align="middle" style="height:auto;width: 100%; align-items: flex-start;"
                  v-loading="is_loading" v-if="pic_list != undefined && pic_list.length != 0">
                <el-col :span="4" v-for="(img, k) in pic_list" :key="k" class="img_item">
                  <div class="img_box " @click="pic_click(img, k, true)">
                    <div class="img_box_img">
                      <!-- <img :src="$fnc.getImgUrl(img.image)"
                                                v-lazy="$fnc.getImgUrl(img.image)"
                                                alt=""> -->
                      <el-image :src="$fnc.getImgUrl(img.image)" lazy></el-image>
                    </div>
                    <p>{{ img.title }}</p>
                  </div>
                  <div class="img_box_mask" @click="pic_click(img, k, false)" v-show="img.is_sel">
                    <i class="el-icon-success"></i>
                  </div>
                </el-col>
                <p class="no_pic_tip" v-if="noMore">暂无更多图片~~</p>
              </el-row>
              <el-row type="flex" justify="center" style="height:100%;" v-else>
                <div class="no_pic">
                  <div class="no_pic_img">
                    <img src="./../../../assets/img/home/no_pic.png" alt="" />
                  </div>
                  <span><i class="el-icon-bell" style="font-size:20px;padding-right:10px;"></i>点击上传图片，按住ctrl可多选</span>
                </div>
              </el-row>
            </el-col>
          </el-col>
          <el-dialog title="选择分类" class="tl size_13" width="800px" custom-class="pic_cate_dia" :modal="false" :destroy-on-close="true"
              :modal-append-to-body="true" :visible.sync="sel_cate_show">
            <el-form ref="form" style="padding-top:30px">
              <el-form-item label="分类名称：" label-width="120px">
                <el-col :span="16">
                  <el-select v-model="sel_cate" placeholder="请选择分类名称" style="width:190px">
                    <el-option v-for="item in cate_list.data" :key="item.id" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item class="tc">
                <el-button :loading="$store.state.isLoading" type="primary" @click="save_move()">移 动</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-dialog :title="is_edit_cate ? '编辑分类' : '添加分类'" class="tl size_13" width="800px" :modal="false" custom-class="pic_cate_dia"
              :destroy-on-close="true" :modal-append-to-body="true" :visible.sync="edit_cate_show" style="padding-top:30px">
            <el-form ref="form">
              <el-form-item label="分类名称：" label-width="120px">
                <el-col :span="16">
                  <el-input size="small" style="width:40%;margin-left: 10px" placeholder="请输入分类名称" clearable v-model="edit_cate_form.title">
                  </el-input>
                </el-col>
              </el-form-item>
              <el-form-item class="tc">
                <el-button :loading="$store.state.isLoading" type="primary" @click="save_edit_cate()">{{ is_edit_cate ? "编 辑" : "添 加" }}
                </el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "up_pic",
  data () {
    return {
      up_show: false,
      is_edit_cate: false,
      edit_cate_form: {
        id: "",
        title: ""
      },
      edit_cate_show: false,
      noMore: false,
      is_loading: false,
      page: 1,
      page_size: 20,
      sel_cate: null, //选择的分类
      sel_cate_show: false,
      sel_pic: [], //选择的图片
      active_index: "1",
      pic_list: [],
      cate_list: {
        data: [],
        sum_number: 0
      }, //分类
      search_form: {
        title: "",
        created_time_begin: "",
        created_time_end: ""
      },
      fileList: [],
      createTime: [],
      pickerOptions2: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  props: {
    file: {
      type: [Array]
    },
    piclink: {
      type: [String, Array]
    },
    show: {
      type: Boolean,
      default: false
    },
    is_more: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number]
    },
    height: {
      type: [String, Number]
    },
    real_width: {
      type: [String, Number]
    },
    real_height: {
      type: [String, Number]
    },
    is_tip: {
      type: Boolean,
      default: true
    },
    index: {
      type: [String, Number],
      default: -1
    },
    is_shop: {
      type: Boolean,
      default: false
    },
    shop_list: {
      type: [Array]
    },
    is_show: {
      type: Boolean,
      default: true
    },
    product_id: {
      type: String,
      default: ""
    }
  },
  created () { },
  components: {},
  methods: {
    del_uppic (i) {
      if (this.is_more == true) {
        // file.splice(index, 1);
        this.$emit("del_pic", i);
      } else {
        this.up_show = false;
        this.$emit("send_pic", "");
        if (this.product_id) {
          let params = {
            id: this.product_id,
            big_piclink: ""
          };
          this.$api.getPage.addBigPiclink(params).then(res => {
            if (res.code == 200) {
              return;
            }
          });
        }
      }
    },

    open_uppic () {
      this.up_show = true;
      this.get_cate(); //获取类别
    },
    close_dia () {
      this.up_show = false;
      this.$emit('closedia')  // 我新加的  
    },
    use_sel () {
      //使用照片
      let num = this.sel_pic.length;
      if (this.is_more == false && num > 1) {
        this.$fnc.alertError("请选择单张图片");
        return;
      }
      if (this.is_more) {
        if (this.is_shop == true) {
          //商品多张
          var pic = [];
          this.sel_pic.forEach(item => {
            var obj = {};
            obj.isZhu = false;
            obj.id = "0";
            obj.url = item.image;
            pic.push(obj);
          });
          this.up_show = false;
          this.$emit("send_pic", pic);
        } else {
          // 多张
          var pic = [];
          this.sel_pic.forEach(item => {
            var obj = {};
            obj.piclink = item.image;
            pic.push(obj);
          });
          this.up_show = false;
          this.$emit("send_pic", pic);
        }
      } else {
        //单张
        var pic = "";
        pic = this.sel_pic[0].image;
        this.up_show = false;
        this.$emit("send_pic", pic);
      }
      this.pic_list.forEach((item, k) => {
        item.is_sel = false;
      });
      this.sel_pic = [];
    },
    save_edit_cate () {
      var params = {};
      params.title = this.edit_cate_form.title;
      if (this.is_edit_cate) {
        params.id = this.edit_cate_form.id;
        this.$api.getPage.pic_rename_cate(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("编辑成功");
            this.edit_cate_show = false;
            this.get_cate(); //获取类别
            this.edit_cate_form = {
              id: "",
              title: ""
            };
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      } else {
        this.$api.getPage.pic_add_cate(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            this.edit_cate_show = false;
            this.get_cate(); //获取类别
            this.edit_cate_form = {
              id: "",
              title: ""
            };
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      }
    },
    edit_cate (flag) {
      // 添加/编辑分类
      this.edit_cate_form = {
        id: "",
        title: ""
      };
      this.is_edit_cate = flag;
      if (flag) {
        this.edit_cate_form.id = this.active_index;
      }
      this.edit_cate_show = true;
    },
    del_cate () {
      //删除分类
      this.$swal({
        title: "您确定要删除该分类吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = {
            id: this.active_index
          };
          this.$api.getPage.pic_del_cate(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这些信息。", "success");
              this.get_cate(); //获取类别
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    },

    load () {
      //下拉加载
      this.is_loading = true;
      this.page = this.page + 1;
      var params = {};
      params.cate_id = this.active_index;
      params.page = this.page;
      params.page_size = this.page_size;
      params.title = this.search_form.title;
      params.created_time_begin = this.search_form.created_time_begin;
      params.created_time_end = this.search_form.created_time_end;
      this.$api.getPage.pic_get_list(params).then(res => {
        if (res.data.code == 200) {
          if (
            res.data.result.data != undefined &&
            res.data.result.data.length > 0
          ) {
            if (this.page == 1) this.pic_list = [];
            var arr = res.data.result.data || [];
            arr.forEach(item => {
              item.is_sel = false;
            });
            this.pic_list = this.pic_list.concat(arr);
            this.is_loading = false;
          } else {
            this.noMore = true;
            this.is_loading = false;
          }
        } else {
          this.is_loading = false;
          this.$fnc.alertError(res.data.result);
        }
        if (this.page == res.data.result.all_page) {
          this.noMore = true;
        }
      });
    },

    del_pic () {
      //删除图片
      this.$swal({
        title: "您确定要删除这些图片吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var id_str = "";
          this.sel_pic.forEach(item => {
            id_str = id_str + item.id + "@";
          });
          var data = {
            id_str: id_str
          };
          this.$api.getPage.pic_del_list(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这些图片。", "success");
              this.click_menu(this.active_index);
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    },
    save_move () {
      var params = {};
      params.cate_id = this.sel_cate;
      var id_str = "";
      this.sel_pic.forEach(item => {
        id_str = id_str + item.id + "@";
      });
      params.id_str = id_str;

      this.$api.getPage.pic_move(params).then(res => {
        if (res.data.code == 200) {
          this.click_menu(this.sel_cate);
          this.active_index = this.sel_cate;
          this.sel_cate_show = false;
          this.$fnc.alertSuccess({
            text: "修改成功"
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    move_pic () {
      //移动图片
      this.sel_cate = this.active_index;
      this.sel_cate_show = true;
    },

    sel_all () {
      //全选
      this.sel_pic = [];
      this.pic_list.forEach(item => {
        item.is_sel = true;
        this.sel_pic.push(item);
      });
    },
    cancel_sel () {
      //取消选择
      this.pic_list.forEach(item => {
        item.is_sel = false;
      });
      this.sel_pic = [];
    },
    pic_click (img, k, flag) {
      this.$set(this.pic_list, k, { ...this.pic_list[k], is_sel: flag });
      if (flag) {
        this.sel_pic.push(img);
      } else {
        this.sel_pic.forEach((item, l) => {
          if (item.id == img.id) {
            if (l > -1) {
              this.sel_pic.splice(l, 1);
            } else {
              this.sel_pic = [];
            }
          }
        });
      }
    },
    search_btn () {
      //搜索
      this.click_menu(this.active_index);
    },
    click_menu (index) {
      //点击导航
      window.scrollTo(0, 0);
      this.is_loading = true;
      this.page = 1;
      this.active_index = index;
      this.noMore = false;
      this.sel_pic = []; //清空选择的
      var params = {};
      params.cate_id = index;
      params.page = this.page;
      params.page_size = this.page_size;
      params.title = this.search_form.title;
      params.created_time_begin = this.search_form.created_time_begin;
      params.created_time_end = this.search_form.created_time_end;
      this.$api.getPage.pic_get_list(params).then(res => {
        if (res.data.code == 200) {
          //   var arr = res.data.result.data;
          //   console.log(arr);
          this.pic_list = res.data.result.data;
          if (
            this.pic_list != undefined &&
            this.pic_list.length < this.page_size
          ) {
            this.noMore = true;
          }
          this.pic_list.forEach(item => {
            item.is_sel = false;
          });
          this.is_loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.is_loading = false;
        }
        if (this.page == res.data.result.all_page) {
          this.noMore = true;
        }
      });
    },

    get_cate () {
      //获取分类
      this.$api.getPage.pic_get_cate({}).then(res => {
        if (res.data.code == 200) {
          this.cate_list = res.data.result;
          // this.cate_list.unshift
          if (
            this.cate_list.data != undefined &&
            this.cate_list.data.length > 0
          ) {
            this.click_menu(this.cate_list.data[0].id);
            this.active_index = this.cate_list.data[0].id;
          }
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },

    uploadSuccess (response, file, fileList, index) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        // this.$fnc.alertSuccess({ text: "上传成功" });
        this.click_menu(this.active_index);
      } else if (response.code == 400) {
        this.$message.error("上传失败" + response.result);
      }
    },
    pic_change (file, fileList) {
      let fileName = file.name;
      let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
      if (regex.test(fileName.toLowerCase())) {
        console.log(file);
        this.fileList = fileList;
      } else {
        this.$message.error("请选择图片文件");
      }
    }
  },
  watch: {
    createTime (val) {
      if (val != null) {
        this.search_form.created_time_begin = this.$fnc.phptime(val[0]);
        this.search_form.created_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.search_form.created_time_begin = "";
        this.search_form.created_time_end = "";
      }
    },
    show (old, after) {
      this.up_show = old;
    }
  }
};
</script>
<style scoped>
.up_pic .el-menu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-right: none;
  border-bottom: 1px solid #eeeeee;
}

.up_pic .el-menu-item.is-active {
  color: #fff;
  background-color: #409eff;
}

.up_pic .el-menu {
  height: 65vh;
  overflow-y: auto;
}

.row-bg {
  /* height: 80vh; */
  /* border-bottom: 1px solid #eeeeee; */
  border: 1px solid #eeeeee;
}

.up_pic .el-dialog__body {
  padding: 20px !important;
}

.no_pic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.no_pic_img {
  width: 30%;
}

.no_pic_img img {
  width: 100%;
}

.no_pic span {
  line-height: 32px;
  color: #999999;
}

.pic_left {
  /* width: 100%; */
  /* height: 600px; */
  height: 100%;
  /* background-color: pink; */
}

.pic_right {
  /* width: 100%; */
  height: 65vh;
  height: 100%;

  border-left: 1px solid #eeeeee;
}

.pic_right_top {
  /* height: 50px; */
  padding: 5px;
  background-color: #fafafa;
}

.pic_right_top_left {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}

@media screen and (min-width: 1200px) {
  .pic_right_top_right > div {
    width: 40%;
  }
}

@media screen and (max-width: 1200px) {
  .pic_right_top_right > div {
    width: 20%;
  }

  .pic_right_top_right {
    padding-left: 10px;
    justify-content: flex-start !important;
  }
}

.pic_right_top_right {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pic_right_bottom {
  height: 62vh;
  align-items: flex-start;
  overflow-y: scroll;
}

.img_item {
  position: relative;
}

.img_box {
  width: 100%;
  height: auto;
  /* background-color: pink; */
  padding: 10px;
  border: 5px solid #eeeeee;
  margin: 5px 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.img_box_img {
  width: 100%;
  height: 200px;

  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_box_img img {
  max_height: 150px;
  width: 100%;
}

.img_box p {
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-row--flex.is-align-middle {
  flex-wrap: wrap;
}

.img_box_mask {
  width: 90%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 90%;
  height: 250px;
  margin: auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.img_box_mask i {
  color: #409eff;
  font-size: 50px;
  /* background-color: #fff; */
}

.no_pic_tip {
  width: 100%;
  padding: 10px 0 30px 0;
  text-align: center;
}

.pic_left_menu {
  width: 100%;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  background-color: #fafafa;
}

.pic_left_menu_item {
  width: 33%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.pic_left_menu_item i {
  padding-right: 5px;
}

.pic_left_menu_item:hover {
  background-color: #409eff;
  color: #fff;
}

.pic_dia .el-dialog__body {
  padding: 0 10px;
}

.up_img_tip {
  text-align: left;
}

.up_img_box {
  position: relative;
}

.up_img_box p {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 95%;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
}

.up_img_box:hover p {
  display: block;
}

.up_img_box:hover i {
  display: block;
}

.up_img_box i {
  display: none;
  position: absolute;
  right: 3px;
  top: 3px;
  font-size: 24px;
  text-align: center;
  color: #4d4d4d;
}
</style>
